<template>
	<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
		<view @touchmove.prevent>
			<view class="bck" v-if="searchUpdateShows">
				<view class="addUserUpdate">
					<view class="ripple">
						<view class="rippleClass">
							<view class="rippleOne"></view>
							<view class="rippleTwo"></view>
						</view>
						<view class="ripples" @tap="onUpdateAnimation(1)">
							<u--image src="/static/search/addUser.png" width="40rpx" height="45rpx"></u--image>
						</view>
					</view>
					<view class="finger">
						<u--image src="/static/search/finger.png" width="168rpx" height="129rpx"></u--image>
					</view>
					<view class="triangle">
						<view class="triangleImg">
							<u--image src="/static/search/triangle.png" width="30rpx" height="25px"></u--image>
						</view>
						<view class="trianglePopup">
							<view class="triangleText">
								<text>现已开通<text class="textGreen">搜索好友互相关注</text>功能，快来和你的朋友一起开启轻松之旅吧。</text>
							</view>
							<view class="trianglePs">
								具体操作详见：我的-添加好友
							</view>
							<view class="triangleBtn" @tap="onUpdateAnimation(2)">
								我知道了
								<!-- 我知道了（{{time}}s） -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		special_effects_revise
	} from '@/api/collection.js'
	export default {
		props: {
			// animationName: {
			// 	type: String,
			// 	default: ''
			// }
		},
		mounted() {
		},
		data() {
			return {
				searchUpdateShows: false,
				time: 4,
				setIntervals: '',
				animations: '',//动画名称
				distinguish: ''//动画页面
			};
		},
		methods: {
			stopRoll() {},
			onOpen(distinguisName, animationNames){
				this.distinguish = distinguisName
				this.animations = animationNames
				this.searchUpdateShows = true
			},
			onClose() {
				this.searchUpdateShows = false
				
			},
			onGoto(type){
				if(type == 1){
					uni.navigateTo({
						url: './search/searchIndex'
					})
				}
			},
			//动画引导
			async onUpdateAnimation(type) {
				try {
					const res = await special_effects_revise({
						distinguish: this.distinguish,
						special_effects: this.animations
					})
					this.onClose();
					this.onGoto(type)
				} catch (e) {
					this.onGoto(type)
					console.log(e)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bck {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 99999999;
		top: 0;
		transition: all .5s;

		.addUserUpdate {
			.ripple {
				transition: all .5s;
				width: 200rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				justify-content:space-around;
				right: 60rpx;
				top: 20rpx;
				.rippleClass {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;

					.rippleOne {
						opacity: 0;
						background: rgba(255, 255, 255, .5);
						border-radius: 50%;
						position: absolute;
						animation: rippleOneAnimation .8s .5s;

					}

					.rippleTwo {
						opacity: 0;
						background: rgba(255, 255, 255, .5);
						border-radius: 50%;
						position: absolute;
						animation: rippleTwoAnimation .8s .8s;

					}
				}

				.ripples {
					width: 100rpx;
					height: 100rpx;
					background: #FFFFFF;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.finger {
				width: 168rpx;
				height: 129rpx;
				animation: fingerAnimation 1s;
				// infinite
				animation-fill-mode: forwards;
				position: absolute;
				right: 260rpx;
				top: 110rpx;
				margin: 10rpx 20rpx;
			}

			.triangle {
				animation: triangleAnimation 1s;
				animation-fill-mode: forwards;
				// infinite
				padding: 50rpx 48rpx 30rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				position: absolute;
				width: 65%;
				opacity: 0;
				top: 400rpx;
				right: 0;
				left: 0;
				margin: auto;

				.triangleImg {
					position: absolute;
					top: -22rpx;
					right: 60rpx;
				}

				.trianglePopup {
					.triangleText {
						font-size: 27rpx;
						color: #1E2730;
						margin-bottom: 40rpx;

						.textGreen {
							color: #3DBE36 !important;
							margin: 0 10rpx;
						}
					}

					.trianglePs {
						font-size: 24rpx;
						color: #9a9a9a;
						margin-bottom: 40rpx;
						text-align: center;
					}

					.triangleBtn {
						width: 100%;
						background: #000000;
						color: #FFFFFF;
						text-align: center;
						padding: 36rpx 0;
						border-radius: 60rpx;
					}
				}
			}
		}
	}

	forwards {
		@keyframes triangleAnimation {
			0% {
				opacity: 0;
				top: 400rpx;
			}

			100% {
				opacity: 1;
				top: 300rpx;
			}
		}

		@keyframes fingerAnimation {
			0% {
				opacity: 0;
				transform: translateX(0rpx);
			}

			40% {
				opacity: 1;
				transform: translateX(50rpx);
			}

			60% {
				opacity: 1;
				transform: translateX(50rpx);
			}

			70% {
				opacity: 1;
				transform: translateX(30rpx);
			}

			90% {
				opacity: 1;
				transform: translateX(50rpx);
			}

			100% {
				opacity: 1;
				transform: translateX(30rpx);
			}
		}

		@keyframes rippleOneAnimation {
			0% {
				opacity: 1;
				width: 50rpx;
				height: 50rpx;
			}

			100% {
				opacity: 0;
				width: 200rpx;
				height: 200rpx;
			}
		}

		@keyframes rippleTwoAnimation {
			0% {
				opacity: 1;
				width: 50rpx;
				height: 50rpx;
			}

			100% {
				opacity: 0;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
</style>
